<!--
 * @作者: 阳光信仰
 * @: 不学怎么会啊,坚持下去
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="icon" href="images/222.ico">
    <title>上传页面</title>
    <script src="./av-min.js"></script>
</head>
<style>
    *{
        margin:0;
        padding:0;
    }
    .avatar{
        text-align:center;
        width: 100%;
        height:45vh;
        display:flex;
        overflow: hidden;
      }
      .avatar div{
        margin:auto;
        overflow: hidden;
      }
      .message{
        width:100%;
        min-height:46vh;
      }
      #message-upload{
         height:80%;
      }
      #avatarname{
        width:100%;
        height:100%;
        text-align:center;
        vertical-align:center;
      }
      input{
        display: none;
      }
      *[contenteditable="true"]:empty:before{
        content:attr(placeholder);
        color: #A9A9A9;
      }
      label{
        cursor:pointer;
        display:inline-block;
      }
      #imageName{
        color:orange;
      }
      p{
        display: inline-block;
      }
      #buttom label{
        width:45%;
        height:8vh;
        border-radius: 5%;
        background-color:rgb(38, 126, 181) ;
        color:white;
        text-align: center;
        line-height:8vh;
        margin-left:10px;
        outline: none;
      }
   
</style>
<body>
    <div class="avatar">
      <div>
        <label for="avatar-upload" id="avatarname">
            <input type="file" id="avatar-upload" />
              <!-- <i class="fa fa-2x fa-camera"></i> -->
              <br/>
              上传封面 
            </label>
          </div>
      </div>
      <div class="message">
        <p>昵称：</p><p id="name" placeholder="在此输入" contenteditable="true" style="width:80%;height:25px"></p>
       <hr/>
       <div id="message-upload" contenteditable="true" placeholder="写点什么" ></div>
      </div>
      <div id="buttom">
        <!-- <i></i> -->
         <label for="audio-upload" id="audioname">
            <input type="file" id="audio-upload" />
              <!-- <i class="fa fa-2x fa-camera"></i> -->
              选择录音 
            </label>
        <label  id="submit">提交</label>
      </div>
</body>

<script>
    var APP_ID = 'avicCLPDpKt9h9KtuZEb4PUe-gzGzoHsz'
    var APP_KEY = '4LrHq1ihQMq7fcc8qjCR6IkO'
    var url='https://leancloudsjson.ygxy.work'
    AV.init({ appId: APP_ID, appKey: APP_KEY,serverURL:url })
    const { Query, User } = AV;
    const Todo = AV.Object.extend('myfile');
    const query = new Query('check');
    const avatarUpload = document.getElementById("avatar-upload");
    const audioUpload = document.getElementById("audio-upload");
    const mybutton = document.getElementById("submit");
    const nameinput = document.getElementById("name");
    const messageinput = document.getElementById("message-upload");
    // let imageName = document.getElementById("imageName")
    var filename,avatarurl
    avatarUpload.addEventListener("change", ()=>{
            let inputImage = document.querySelector("input[id=avatar-upload]").files[0];
             filename=inputImage.name;
            const upimage = new AV.File(inputImage.name, inputImage);
            upimage.save({ keepFileName: true , onprogress: (progress) => {
            console.log(progress);
            }}).then(
            (file) => {
            avatarurl=file.attributes.url; // https://your-file-domain/5112b94e0536e995741c/resume.txt
            const todo = new Todo();
                todo.set("title", filename);
                todo.add("attachments", file);
                todo.save();
                document.getElementsByClassName("avatar")[0].innerHTML = `<div style="width:100%;height:45vh;background-image:url('${file.attributes.url}');background-size:contain;background-repeat:no-repeat;background-position:center;"><div/>`;
            //document.getElementById("imageName").innerText = filename;
            },
            (error) => {
                console.log(error)
                // 保存失败，可能是文件无法被读取，或者上传过程中出现问题
            }
        )
        })
        
    mybutton.onclick=()=>{
        if (audioUpload.files.length) {
    const localFile = audioUpload.files[0];
    var audioname=localFile.name;
    const file = new AV.File(localFile.name, localFile);
    file.save({ keepFileName: true , onprogress: (progress) => {
      console.log(progress);
    }}).then(
    (file) => {
    var audiourl=file.attributes.url; // https://your-file-domain/5112b94e0536e995741c/resume.txt
    const todo = new Todo()
        todo.set("avatartitle", filename);
        todo.set("audiotitle", audioname);
        todo.set("audiourl", audiourl);
        todo.set("avatarurl", avatarurl);
        todo.set("flag", 1);
        todo.set("name", nameinput.innerHTML);
        todo.set("message", messageinput.innerHTML);
        todo.add("attachments", file);
        todo.save();
        alert("提交成功")
    },
    (error) => {
        console.log(error)
        // 保存失败，可能是文件无法被读取，或者上传过程中出现问题
    }
)
    }
    }
</script>
</html>